<template>
  <div>
    <div class="nav-wrap">
      <ul class="lf">
        <li>
            <img
              class="logo"
              src="../assets/images/logo.png"
              alt=""
              srcset=""
            />
        </li>
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: currentIndex == index }"
          @click="routerLink(index, item.path)"
        >
          {{index}} -{{ item.title }}
        </li>
      </ul>
      <ul class="rt">
        <li>
          <div class="search-wrap">
            <input type="text" />
            <svg-icon class="icon" icon-class="search" />
          </div>
        </li>
        <li @click="skip('link')">
          <svg-icon class="icon" icon-class="shezhi" />
        </li>
        <li @click="skip('btn', 'isShowA')">
          <svg-icon class="icon" icon-class="wenhao" />
          <div class="drop-down-a" v-if="isShowA">
            <a
              class="p"
              tag="a"
              href="https://desk.zoho.com.cn/portal/nwvdi/zh/home"
              target="_blank"
              >在线支持</a
            >
            <div class="p" @click="aboutPupToggle">关于</div>
          </div>
        </li>
        <li @click="skip('btn', 'isShowB')">
          <svg-icon class="icon" icon-class="user" />
          <div class="drop-down-b" v-if="isShowB">
            <svg-icon class="touxiang" icon-class="touxiang" />
            <div class="name">ting.zhao@nwvdl.com</div>
            <div class="btn-group-a">
              <div
                class="item"
                @mouseover="changeActiveB($event)"
                @mouseout="removeActiveB($event)"
              >
                <svg-icon class="icon transform" icon-class="btn-group-1" />
              </div>
              <div
                class="item"
                @mouseover="changeActiveB($event)"
                @mouseout="removeActiveB($event)"
              >
                <svg-icon class="icon" icon-class="btn-group-2" />
              </div>
              <div
                class="item"
                @mouseover="changeActiveB($event)"
                @mouseout="removeActiveB($event)"
              >
                <svg-icon class="icon" icon-class="btn-group-3" />
              </div>
              <div
                class="item"
                @mouseover="changeActiveB($event)"
                @mouseout="removeActiveB($event)"
              >
                <svg-icon class="icon" icon-class="btn-group-4" />
              </div>
            </div>
            <div class="btn-group-b">
              <div class="item">
                <svg-icon class="icon" icon-class="btn-group-5" />
                我的任务
              </div>
              <div class="item">
                <svg-icon class="icon" icon-class="btn-group-6" />
                其他功能
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 关于弹窗 -->
    <div class="about-pup-wrap" v-if="isShowAboutPup">
      <div class="head">
        关于NVisual
        <div class="close-btn" @click="aboutPupToggle">X</div>
      </div>
      <div class="body">
        <div class="title">NWVDI NVisual</div>
        <div class="cont">
          <span class="fw700">Version</span>
          8.6.842.4766
        </div>
        <div class="cont">
          <span class="fw700">Release</span>
          date: 22-Oct-2020
        </div>
        <div class="cont">
          <span class="fw700">Database</span>
          (vis) Version 8.6.842
        </div>
        <div class="cont">
          <span class="fw700">Copyright</span>
          © 2009-2020 NWVDI
        </div>
      </div>
      <div class="foot">
        <button @click="aboutPupToggle">确定</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';

    @Component
    export default class Top extends Vue {
      navList= [
        { title: "自动发现", path: "/find" },
        { title: "设备管理", path: "/manage" },
        { title: "仪表图", path: "" },
      ];
      currentIndex= 0;
      isShowA= false;
      isShowB= false;
      isShowAboutPup= false; //关于弹窗
      $router: any;
      index:String;
      path:String


      routerLink(index, path) {
        this.currentIndex = index;
        this.$router.push(path);
      };
      //  检索当前路径
      checkRouterLocal(path) {
        let index = path.lastIndexOf("/");
        let _path = path.substring(0, index);
        if (_path == "") {
          _path = path;
        }
        // 查找当前路由下标高亮

        this.currentIndex = this.navList.findIndex((item) => item.path === _path);
      };
      // 鼠标移入移出事件
      changeActiveB($event) {
        $event.currentTarget.className = "active item";
      };
      removeActiveB($event) {
        $event.currentTarget.className = "item";
      };
      // 关于弹窗
      aboutPupToggle() {
        this.isShowAboutPup = !this.isShowAboutPup;
      };
      //右侧点击事件
      skip(type, parameter) {
        if (type == "link") {
          this.$router.push("/DeviceManagement");
        } else if (type == "btn") {
          if (parameter == "isShowA") {
            this.isShowA = !this.isShowA;
          } else if (parameter == "isShowB") {
            this.isShowB = !this.isShowB;
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
.nav-wrap
  max-width $max-width
  min-width $min-width
  height 36px
  background $main-color
  margin 0 auto
  font-size 13px
  display flex
  justify-content space-between
  position fixed
  top 0
  left 0
  right 0
  z-index 500
  .lf
    .active
      color #fff
      background #3570E3
    display flex
    li:nth-child(1)
      width 90px
      a
        width 100%
        height 36px
        display flex
        align-items center
        justify-content center
    li
      color #AAAAAA
      width 127px
      height 36px
      display flex
      align-items center
      justify-content center
      border-right solid 1px $border-color-1
      cursor pointer
      .logo
        width 18px
        height 26px
        line-height 36px
        display inline-block
    li:hover
      background $auxiliary-color-3
  .rt
    display flex
    li:nth-child(1)
      width 236px
    li:last-child .icon
      width 22px
      height 22px
    li
      color #AAAAAA
      width 45px
      height 36px
      display flex
      align-items center
      justify-content center
      cursor pointer
      position relative
      .icon
        width 17px
        height 17px
      .search-wrap
        margin-right 70px
        position relative
        input
          height 25px
          width 236px
          background $auxiliary-color-1
          border solid 1px $border-color-2
          padding 0 5px
          color #fff
        .icon
          position absolute
          right 5px
          top 4px
      .drop-down-a
        position absolute
        right 8px
        top 36px
        width 90px
        z-index 50
        background #444
        .p
          display inline-block
          width 90px
          height 30px
          background #444
          padding 0 14px
          color #fff
      .drop-down-b
        position absolute
        right 0
        top 36px
        width 254px
        z-index 50
        background $secondary-color
        display flex
        flex-direction column
        align-items center
        .touxiang
          width 60px
          height 60px
          margin-top 36px
          margin-bottom 26px
        .name
          color #8E8E8E
          font-size 14px
        .btn-group-a
          display flex
          .item
            width 34px
            height 34px
            border solid 1px $border-color-3
            border-radius 50%
            background #4C4C4C
            display flex
            justify-content center
            align-items center
            margin 0 5px
            margin-top 12px
            .icon
              width 14px
              height 14px
            .transform
              transform rotate(315deg)
              -ms-transform rotate(315deg)
              -moz-transform rotate(315deg)
              -webkit-transform rotate(315deg)
              -o-transform rotate(315deg)
          .active
            background #A4A4A4
            border-color #FEFEFE
        .btn-group-b
          margin-top 20px
          width 217px
          border-top dotted 1px #B3B3B3
          margin-bottom 35px
          color #CACACA
          .item
            display flex
            justify-content center
            align-items center
            margin-top 20px
            .icon
              margin-right 15px
              width 15px
              height 15px
.about-pup-wrap
  width 360px
  position fixed
  left 0
  right 0
  margin 0 auto
  margin-top 65px
  z-index 100
  background $auxiliary-color-2
  .head
    background $main-color
    color #F0EBEB
    font-size 13px
    padding-left 24px
    height 25px
    display flex
    justify-content space-between
    align-items center
    border-bottom solid 1px #2A2A2A
    .close-btn
      width 25px
      height 25px
      text-align center
      line-height 25px
      cursor pointer
    .close-btn:hover
      background #C80505
  .body
    color #fff
    padding 32px 53px
    .title
      font-size 15px
      font-weight 700
    .cont
      font-size 13px
      margin-top 8px
      font-weight 400
      .fw700
        font-weight 700
  .foot
    border-top dotted 1px #b3b3b3
    text-align center
    margin 0 18px
    button
      width 98px
      height 30px
      line-height 30px
      margin 20px 0
      padding 0
      outline none
      background $auxiliaer-color-4
      color #fff
      border none
      cursor pointer
      border-radius 5px
</style>